import React, { useEffect, useState } from "react";
import "./myInformation.scss";
import { CloseOutline } from "antd-mobile-icons";
import Title from "components/Title/title";
import { NoticeBar, Space } from "antd-mobile";
import img1 from "assets/system_information.png";
import img2 from "assets/interview_news.png";
import img3 from "assets/recorded_message.png";


const Index = () => {



  return (
    <div>
      <header>
        <Title />
      </header>
      <main>
        <Space block direction="vertical">
            <NoticeBar
              extra={
                <Space style={{ "--gap": "12px" }}>
                  <button >开启</button>
                </Space>
              }
              icon={<CloseOutline />}
              content={"打开系统通知, H币入账等消息不错过, 优先级最高奥"}
            />
        </Space>
        <div className="mainItem">
          <ul>
            <li>
              <img src={img1} alt="" />
            </li>
            <li>
              <p>系统消息</p>
            </li>
            <li></li>
          </ul>
          <ul>
            <li>
              <img src={img2} alt="" />
            </li>
            <li>
              <p>问诊消息</p>
            </li>
            <li></li>
          </ul>
          <ul>
            <li>
              <img src={img3} alt="" />
            </li>
            <li>
              <p>H币入账消息</p>
            </li>
            <li></li>
          </ul>
        </div>
      </main>
      
    </div>
  );
};

export default Index;